import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../store/actions';
import Footer from '../../components/Footer'
import List from '../../components/List'
import Dialog from '../../components/Dialog'
class Index extends Component {
  state = {
    isShow: false,
    isShow1: false,
    id: ''
  }
  handleAddGroup() {
    this.setState({ isShow1: false })
    const value = this.ipt.value
    const action = actions.addGroup({ groupName: value, list: [], id: new Date().getTime().toString() })
    this.props.dispatch(action)
  }
  handleSetGroup() {
    const { id } = this.state
    this.setState({ isShow: false })
    const action = actions.setGroup({ id })
    this.props.dispatch(action)
  }
  componentDidMount() {
    const action = actions.setBookList()
    this.props.dispatch(action)
  }
  render() {
    const { bookList, group } = this.props
    const { isShow, isShow1 } = this.state
    return (
      <div>
        <Footer></Footer>
        <List list={ bookList }></List>
        <div className="group">
          {
            group.length > 0 && group.map((v, i) => {
              return (
                <div className="group-item" key={i}>
                   <List list={ v.list } isTitle={ false }></List>
                   <h3>{ v.groupName }</h3>
                </div>
              )
            }) 
          }
        </div>

        <h1 style={{ display: bookList.some(v => v.isChecked) ? 'block': 'none' }}>
          <button style={{padding: 20 }} onClick={ () => this.setState({ isShow: true }) }>分组为</button>
        </h1>
        {/* 分组为弹框 */}
        <Dialog isShow={ isShow }
          onOk={ () => this.handleSetGroup() }
          onNo={ () => this.setState({ isShow: false }) }
        >
          <button onClick={ () => this.setState({ isShow: false, isShow1: true }) }>新建分组</button>
          {
            group.length > 0 && group.map((v, i) => {
              return (
                <p key={i}>
                  <input type="radio" name="group" onChange={ () => this.setState({ id: v.id}) }/>
                  <span>{ v.groupName }</span>
                </p>
              )
            })
          }
        </Dialog>

          {/* 新增分组弹框 */}
        <Dialog isShow={ isShow1 }
          onOk={ () => this.handleAddGroup() }
          onNo={ () => this.setState({ isShow1: false }) }
        >
          <b>分组名称</b>
          <input type="text" ref={ ref => this.ipt = ref }/>
        </Dialog>
      </div>
    );
  }
}

const mapState = state => ({ ...state })
const mapDispatch = dispatch => ({ dispatch })

export default connect(mapState, mapDispatch)(Index);
